<template>
	<div class="boody">
		<div class="header">
			<router-link to="/home">
				<div class="header_left"></div>
			</router-link>
			<p>秒杀详情</p>
			<div class="header_right">
				<div class="header_right_left"></div>
			<router-link to="/home">
				<div class="header_right_right"></div>
			</router-link>
			</div>
		</div>

		<div class="body">
			<div class="banner">
				<img :src="obj.imgurl">
				<div>
					<p>跟团游 | 北京出发</p>
					<p>产品编号：1520350</p>
				</div>
			</div>
			<h3>
				<span>
					{{obj.title}}
				</span>
			</h3>
			<div class="price">
				<div class="price_top border_bottom">
					<div class="price_top_left">
						<img src="static/zhangjiajieimg/temaiFlag.png">
						<p>
							<span>
								￥<i>{{obj.oldPrice}}</i>
							</span>
							起
						</p>
					</div>
					<p class="price_top_right">剩余{{obj.soldCount}}份</p>
				</div>
				<div class="price_bottom">
					<div>
						<span class="timepng"></span>
						<span class="color">距离结束:</span>
						<span class="block">{{day}}</span>
						<span class="color">天</span>
						<span class="block">{{h}}</span>
						<span class="color">:</span>
						<span class="block">{{m}}</span>
						<span class="color">:</span>
						<span class="block">{{s}}</span>
					</div>
					<span>抢购中</span>
				</div>
			</div>
			<div class="message margin_top">
				<div class="title border_bottom">
					<p><span style="font-size: .4rem">游客点评</span><span>(<i>0%</i>好评率)</span></p>
					<a href=""><p>共有0条点评<span class="spanafter"></span></p></a>
				</div>
				<div class="messageboard">
					<img src="static/zhangjiajieimg/noComment.png">
					<p>新产品,暂无游客点评</p>
				</div>
			</div>
			<div class="message margin_top">
				<div class="title border_bottom">
					<p><span>可选套餐</span><span>(1个)</span></p>
				</div>
				<div class="taocan">
					<div class="taocan_left">
						<span class="taocan_left_top" >{{obj.introduce}}</span>
						<p class="taocan_left_bottom"><span>出行日期：</span> <span>08/26</span><span>、08/26</span><span>、08/26</span></p>
						<span>更多</span>
					</div>
					<div class="taocan_right">
						<div>
							<p><span>￥<i>{{obj.oldPrice}}</i></span>起</p>
							<router-link to="/car">立即抢</router-link>
						</div>
					</div>
				</div>
			</div>
			<div class="message margin_top">
				<div :class="dw">
					<p><span>详情</span></p>
					<p><span>行程</span></p>
					<p><span>费用须知</span></p>
				</div>
				<div class="xq">
					<div class="xq_top border_bottom">
						<div class="font1">推荐理由</div>
						<div class="font2">赠送挂在瀑布上的千年古镇—芙蓉镇，寻找历史岁月痕迹；品湖南美味，安排特色美食，土家十大碗、土司王宴、苗家特色餐；全程不走回头路，赠晚会、天门山景区门票及大缆车住宿升级：全程入住挂牌三星酒店、凤凰入住沱江边或古城内酒店；</div>
					</div>
					<div class="xq_top border_bottom">
						<div class="font1">产品特色</div>
						<div>
							<span class="Span">景点介绍</span>
							<span class="bg"></span>
						</div>
					</div>
					<div class="border_bottom">
						<div class="font3">武陵源风景名胜区（张家界）：</div>
						<div class="font2">
							武陵源独特的石英砂岩峰林在均属国内外罕见，在360多平方公里的面积中，目前所知有山峰3000多座，这些突兀的岩壁峰石，连绵万顷，层峦叠嶂。每当雨过天晴或阴雨连绵天气，山谷中生出的云雾缭绕在层峦叠嶂之间，云海时浓时淡，石峰若隐若现，景象变幻万千。<br>
							武陵源水绕山转，据称张家界就有“秀水八百”，众多的瀑、泉、溪、潭、湖各呈其妙。金鞭溪是一条十余公里长的溪流，从张家界沿溪一直可以走到索溪峪，两岸峡谷对峙，山水倒映溪间，别具风味。
						</div>
						<div class="img">
							<img src="static/zhangjiajieimg/860ee2e4-ea42-44dd-85e1-8c4315421fa0.jpg">
							<img src="static/zhangjiajieimg/1f0b3bc0-a6d6-4422-8561-71c358a800f7.jpg">
						</div>
						<div class="font3">
							凤凰古城：
						</div>
						<div class="font2">
							凤凰古城住房大多为木结构建筑，有平房和楼房两种，也有长方形的茅草房。多以大米为主食，玉米、小麦、红薯为辅；一些地方以玉米、荞麦和土豆为主食。饮酒的嗜好十分普遍。各地妇女服饰差异较大，多数地区妇女穿大领对襟短衣和长短不一的百褶裙，有的长及脚面，有的短至膝盖。部分地区妇女穿大襟右衽上衣，下着宽脚裤。有的上衣无领，衣袖和裤脚缘有宽大花边，头缠布头巾，戴耳环、项圈、手镯等饰物。苗族妇女的头饰式样繁多，配上各种式样的包头帕，有的包成尖顶、圆顶，有的把头发绕在支架上，高竖于头顶上。她们的盛装以黔东南的独具特色，把银饰钉在衣服上成"银衣"，头上戴着形如牛角的银质头饰，高达尺余。男子服装差别不大，多着大襟或对襟短衣，下穿长裤。部分地区男子穿麻布短衣或长衫，披编有几何图形的披肩或羊毛毡。
						</div>
						<div class="img">
							<img src="static/zhangjiajieimg/3b6760d0-20ac-494f-af04-8b5b5faa5d2d.jpg">
						</div>
					</div>
				</div>
				<div class="xc border_bottom">
					<div class="xc_top">
						<div class="xc_top_day">
							<span class="color">第一天</span><span> 张家界—天门山—天门洞—玻璃栈道</span>
						</div>
						<div class="xc_top_content">
							1、早上  飞机<br>
	                        北京乘飞机赴张家界；
	                        <br>
	                        <br>
	                        参考航班：CZ6600(T2航站楼06：25起飞-经停长沙-11:20抵达)
	                        <br>
							<br>
	                        2、中午  中餐<br>
	                        餐费标准：约20.00人民币/人/餐
	                        用餐时间：约1小时  
	                        3、约13:00  前往游览【天门山国家森林公园】（游览时间约4小时00分钟）抵达中餐后游览国家5A级景区—【天门山国家森林公园】【天门洞】、【玻璃栈道】（赠送天门山景区门票及大缆车及穿山大扶梯，山顶自选性质的小扶梯35元自理)。 【天门山风景区】：被称为“美丽张家界的新传奇”，客人可乘世界高山客运索道（长7.5公里），体验腾云飞翔的刺激震撼，28分钟到达山顶；到凌霄台俯瞰张家界市区胜景，领略山水长卷的磅礴气势；走鬼谷栈道（鞋套5元/人自理），在峭壁云端纵情尖叫全面挑战你的“敢”觉；远观神秘鬼谷洞，体验纵横学玄妙；拜求儿洞，求子得子，求福得福；可根据自己的喜好，选择游览天界佛国天门山寺，参拜释迦牟尼佛真身舍利；沿途欣赏金龟驮元宝，将军峰，箭杆锋等奇绝景观；登999级上天梯至世界天然穿山溶洞“天门洞”体验自然造化的神奇和震撼冲击（游览时间约4小时）；入住酒店；<br><br>
	                        4、晚上  晚餐<br>
	                        餐费标准：约20.00人民币/人/餐
	                        用餐时间：约1小时 <br> <br>
	                        5、晚上  <br>
	                        入住酒店：武陵源，四星或同等酒店，武陵源：金玉大酒店、万河或金都大酒店、添裕、湘西明珠或其他同级酒店；，酒店双标间（注：湖南段酒店现开始不再提供免费洗漱用品，建议各位游客自备洗漱用品。）<br>
						</div>
						<div  class="xc_top_zs">
							<div></div><span>住宿：武陵源：金玉大酒店、万河或金都大酒店、添裕、湘西明珠或其他同级酒店；</span>
						</div>
						<div  class="xc_top_jt">
							<div></div><span>交通：飞机</span>
						</div>
					</div>
				</div>
				<div class="fy border_bottom">
					<div class="fy_content">
						<div>费用包含</div>
						<span>1、交通：往返机票（经济舱，含税费）；2、当地用车：空调旅游车（保证一人一正座位，车型大小根据游客实际人数安排）；3、住宿：行程所列酒店双人标准间；(住宿只含每人每天一床位。若出现单男单女，客人需补房差；若一大带一小报名，必须补房差，使用一间房,如选择当地现补单房差价格则以当地实际发生为准，不保证与页面显示金额一致)；4、门票：行程中包含张家界国家森林地质公园套票，赠送天门山国家森林地质公园、  玻璃桥或黄龙洞+《烟雨张家界》风情晚会（行程内赠送门票，无优免无退费）；猛洞河漂流首道大门票；5、用餐：含4早8正(一顿正餐每人每餐25元；正餐10人1桌；8菜2汤；)6、导游服务：当地中文导游服务，无全程陪同7、儿童价标准：儿童价适用于2至12周岁（不含）的儿童；  儿童价费用包含：仅含（往返飞机票,当地旅游车位,导游服务, 半价正餐,不含床位不含早餐,如产生火车票，门票等费用请自理）费用，其余一切产生费用敬请自理。8、其他：航班时间仅供参考，具体航班以实际出票为准；</span>
					</div>
				</div>
				
			</div>
			<div class="content_bottom">
				<div class="content_bottom_title">
					<div>相似产品</div>
				</div>
				<div class="content_bottom_content">
					<img src="static/zhangjiajieimg/95fd78c4-f49d-4c0e-9da8-fa5bd06fedef_480_320.jpg">
					<div>
						<div>【指定班期特价】长沙、张家界玻璃桥、天门山国家森林公园、凤凰古城巴士6日深度游([长沙升级一晚五星住宿]赠送两场表演盛宴，全程风味餐、凤凰宿特色客栈、下单即赠送一份旅行三宝、全程无购物无自费【特卖】)</div>
						<div class="font"><span>￥<i>1643</i></span>起</div>
					</div>
				</div>
			</div>
		</div>
		<div class="fixed2" @click="click">
			顶部
		</div>
		<div class="button">
			<a href="" class="button_left">
				电话咨询
			</a>
			<router-link to="/car" @click.native="add(obj)" class="button_right">
				立即抢
			</router-link>
		</div>
	</div>
</template>

<script>
	export default{
		data(){
			return{
				day:1,
				h:1,
				m:1,
				s:1,
				dw:"title2 border_bottom dw",
				obj:[]
			}
		},
		methods:{
			request(){
			this.$http.get("./static/cityWalkList.json")
            .then(function(res){
                // console.log(res.body);
				this.list=res.body;
				
				for(var item in this.list){
				if(this.list[item].id==this.$route.params.para){
					this.obj=this.list[item];
				}
				}
            })
		},
		add(obj){
			this.$store.commit("goods",obj)
		},
			getTime(){
				let oldTime = new Date("2017,08,26");
				let time = oldTime-(new Date)
				this.day = Math.floor(time/1000/60/60/24);
				this.h = parseInt(this.day/(1000*60*60));
				this.m = parseInt((time % (1000 * 60 * 60)) / (1000 * 60));
				this.s = parseInt((time % (1000 * 60)) / 1000);
			},
			click(){
				let out;
				function bibao(){
					clearTimeout(out)
					out = setTimeout(function(){
						document.body.scrollTop-=70
						if (document.body.scrollTop==0) {
							document.body.scrollTop=0;
							clearTimeout(out)
						}else{
							bibao();
						}
					},1)
				}
				bibao()
			}
		},
		mounted(){
			this.request();	
			this.getTime();
			setInterval(this.getTime,1000)
			document.body.scrollTop=0;
			var shake = (function(){
				var timer = new Date();
				return function(callback,time){
					if (new Date - timer > time) {
						timer = new Date;
						callback()
					}
				}
			})();
			scroll=()=>{
				let that = this.dw
				shake(function(){
					let top = document.body.scrollTop
					let fixed = document.querySelector(".fixed2")
					if (top>=1736){
						that="title2 border_bottom dw"
					}else{
						that="title2 border_bottom"
					}
					if (top>900){
						fixed.style.display="block"
					}else if(top<=900){
						fixed.style.display="none"
					}
				},200)
				this.dw = that
			}
			document.body.onscroll=scroll
		},
		updated(){
			
		},
		computed:{
			
		},
		watch:{
			
		}
	}




</script>

<style scoped>
.dw{
	position: fixed;
	top: 1.066667rem;
	left: 0;
	right: 0;
	z-index: 99;
	background: #fff;
}
.boody{
	background: #efeff7;
}
.margin_top{
	margin-top: 0.266667rem;
}
.header{
	position: fixed;
	left: 0;
	right: 0;
	display: flex;
	justify-content: space-between;
	background: #fff;
	font-size: .5rem;
	text-align: center;
	line-height: 1.066667rem;
	z-index: 99;
}
.header .header_left,.header_right_left,.header_right_right{
	width: 0.933333rem;
	height: 1.066667rem;
}
.header_left{
	background: url(../../../static/zhangjiajieimg/0662d35sviltgn1ngruwip40pwwhcd6u.png)no-repeat center;
	background-size: 30%;
}
.header_right{
	display: flex;
	justify-content: space-around;
}
.header_right_left{
	background: url(../../../static/zhangjiajieimg/funl5mn2kmbs69yzkkujtlsched6bwlm.png)no-repeat center;
	background-size: 80%;
}
.header_right_right{
	background: url(../../../static/zhangjiajieimg/bba4kdtk87mzke8ucaah2dtzznqfn0y3.png)no-repeat center;
	background-size: 80%;
}
.body{
	padding: 1.066667rem 0 1.28rem 0;
}
.banner{
	height: 4.159467rem;
	overflow: hidden;
	position: relative;
	color: #fff;
	margin: 0 auto;
}
.banner img{
	width: 100%;
	height: 100%;
}
.banner div{
	position: absolute;
	bottom: 0;
	padding: .2rem;
	display: flex;
	flex-flow: nowrap;
	justify-content: space-between;
	width: 95%;
}
.body>h3{
	padding: .2rem;
	padding-bottom: 0;
	font-weight: normal;
	font-size: .374rem;
	background: #fff;
}
.price{
	padding: .2rem;
	font-size: .33rem;
	background: #fff;
}
.price>div{
	background: #FFF8FB;
	width: 100%;
	padding: .2rem 0;
}
.price_top{
	display: flex;
	justify-content: space-between;
	align-items: center;
	
}
.border_bottom{
	border-bottom: 2px solid #E3E3E3;
}
.price_top>p{
	padding-right: .2rem;
}
.price_top_left{
	display: flex;
	flex-flow: nowrap;
	align-items: center;
}
.price_top_left p{
	margin-left: .15rem;
}
.price_top_left span{
	color: #d30775;
}
.price_top_left i{
	font-size: .6rem;
}
.price_bottom{
	position: relative;
}
.price_bottom span{
	display: inline-block;
}
.timepng{
	margin-left: .2rem;
	width: 0.533333rem;
	height: 0.533333rem;
	background: url(../../../static/zhangjiajieimg/alarm_pink.png)no-repeat center;
	background-size: 70%;
	vertical-align: middle;
}
.block{
	width: 0.72rem;
	height: 0.746667rem;
	background: #727272;
	border-radius: 7px;
	line-height: 0.746667rem;
	text-align: center;
	color: #fff;
	font-size: .4rem;
}
.price_bottom>span{
	position: absolute;
	top: 30%;
	right: .2rem;
	color: #FF740D;
	font-size: .37rem;
}
.message{
	background: #fff;
	font-size: .35rem;
}
.title{
	display: flex;
	flex-flow: nowrap;
	justify-content: space-between;
	align-items: center;

}
.title i{
	color: #d30775;
}
.title p{
	padding: .3rem;
}
.messageboard{
	display: flex;
	flex-flow: nowrap;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 2.32rem;
}
.spanafter{
	float: right;
    width: 0.32rem;
    height: 0.32rem;
    transform-origin: 30% 56%;
    -webkit-transform-origin: 30% 56%;
    transform: rotate(135deg);
    -webkit-transform: rotate(135deg);
    border-top: 1px solid #565a5c;
    border-left: 1px solid #565a5c;
}
.spanafter::after{
	display: block;
}
.taocan{
	padding: .2rem;
	padding-right: 0;
	display: flex;
	flex-flow: nowrap;
}
.taocan_left{
	width: 70%;
}
.taocan_left_top{
	font-size: 0.45rem;
}
.taocan_left_bottom{
	font-size: .35rem;
	padding: .2rem;
	float: left;
	padding-left: 0;
}
.taocan_left>span{
	float: right;
	padding: .2rem;
}
.taocan_right{
	border-left: 2px dashed #E3E3E3;
	display: flex;
	flex-flow: wrap column;
	justify-content: center;
	align-content: center;
	align-items: center;
	width: 30%;
	font-size: .4rem;
}
.taocan_right>div{
	display: flex;
	flex-flow: wrap column;
	justify-content: center;
	align-items: center;
	align-content: center;
}
.taocan_right>div>a{
	display: inline-block;
	background: #d30775;
	width: 2.026667rem;
	height: 0.8rem;
	color: #fff;
	border-radius: 7px;
	text-align: center;
	line-height: 0.8rem;
}
.taocan_right>div>p>span{
	color: #d30775;
}
.taocan_right>div>p>span>i{
	font-size: .5rem;
}
.title2{
	display: flex;
	flex-flow: nowrap;
	justify-content: space-around;
}
.title2 p{
	height: 1.5rem;
	line-height: 1.5rem;
}
.xq{
	padding: 0 .3rem;
}
.xq_top{
	padding: .3rem 0;
}
.font1{
	color: #d30775;
	font-size: .2rem;
}
.font2{
	font-size: .19rem;
	letter-spacing: .02rem;
	/*line-height: .35rem;*/
}
.font3{
	font-size: .25rem;
	padding: .65rem 0;
}
.Span{
	display: inline-block;
	padding: 0 .3rem 0 0;
	font-size: .5rem;
	margin: .6rem 0 .2rem 0;
	border-right: 1px solid #E3E3E3;
}
.bg{
	display: inline-block;
	width: 5.333333rem;
	height: 0.533333rem;
	background: url(../../../static/zhangjiajieimg/product-detail-all.png)no-repeat 0 -17.8rem;
	background-size: 200%;
	vertical-align: middle;
}
.img{
	margin: .5rem 0;
}
.img img{
	width: 100%;
}
.xc{
	padding: .3rem;
}
.xc_top_day .color{
	font-size: .5rem;
	color: #D30775;
}
.xc_top_day span{
	font-size: .2rem;
}
.xc_top_content{
	font-size: .18rem;
}
.xc_top_zs,.xc_top_jt{
	display: flex;
	flex-flow: nowrap;
}
.xc_top_zs div,.xc_top_jt div{
	width: 0.8rem;
	height: 0.8rem;
	background: url(../../../static/zhangjiajieimg/zhu.jpg)no-repeat center top;
}
.xc_top_zs span{
	font-size: .35rem;
	margin-left: .1rem;
}
.xc_top_jt div{
	background: url(../../../static/zhangjiajieimg/jiao.jpg)no-repeat left top;
}
.fy_content{
	padding: .3rem;
	display: flex;
	flex-flow: wrap column;
}
.fy_content div{
	font-size: .4rem;
	padding-top: .3rem;
	display: flex;
}
.fy_content span{
	font-size: .2rem;
}
.content_bottom{
	padding: .3rem;
	margin: 0.266667rem 0;
	background: #fff;
}
.content_bottom_content{
	width: 50%;
}
.content_bottom_content img{
	width: 100%;
}
.content_bottom_content>div{
	border: 1px solid #E3E3E3;
	border-top: none;
	padding: .2rem;
}
.content_bottom_content>div>div{
	overflow: hidden;
	text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    font-size: .36rem;
}
.content_bottom_content>div .font{
	margin-left: 2.3rem;
	padding: .2rem;
	display: inline-block;
}
.content_bottom_title div{
	background: url(../../../static/zhangjiajieimg/guessLike.png)no-repeat center left;
	padding: .2rem .2rem .2rem .6rem;
	font-size: .2rem;
}
.font{
	font-size: .3rem;
}
.font span{
	color: #d30775;
}
.font span i{
	font-size: .5rem;
}
.fixed2{
	width: 1.2rem;
	height: 1.2rem;
	background: rgba(211,7,117,.8) url(../../../static/zhangjiajieimg/top.png)no-repeat center 0;
	background-size: .7rem;
	border-radius: 50%;
	position: fixed;
	top: 78%;
	right: 4%;
	color: #fff;
	text-align: center;
	line-height: 1.6rem;
}
.button{
	position: fixed;
	bottom: 0;
	display: flex;
	justify-content: space-around;
	width: 100%;
}
.button a{
	display: inline-block;
	height: 1.28rem;
	line-height: 1.28rem;
	text-align: center;
	color: #fff;
	font-size: .4rem;
}
.button_left{
	width: 35%;
	background: #ff740d;
}
.button_right{
	width: 65%;
	background: #d30775;
}
</style>